<template>
	<view class="out">


		<view v-if="radio1 === 0">
			<!-- 维修信息 -->
			<view class="repairinfo">
				<view class="title">维修信息</view>
				<!-- 维修单号 -->
				<view class="frominfo">
					<view class="left">
						维修单号:
					</view>
					<view class="">
						{{orderDetails.id}}
					</view>
				</view>

				<!-- 车主姓名 -->
				<view class="frominfo">
					<view class="left">
						车主姓名:
					</view>
					<view class="">
						{{orderDetails.name}}
					</view>
				</view>
				<!-- 联系方式 -->
				<view class="frominfo">
					<view class="left">
						联系方式:
					</view>
					<view class="">
						{{orderDetails.phone}}
					</view>
					<view class="dianhua">
						<img src="../../../static/phone.png" alt="" />
					</view>
				</view>
				<!-- 维修方式 -->
				<view class="frominfo">
					<view class="left">
						维修方式:
					</view>
					<view class="">
						{{orderDetails.type=="0"?"到店维修":"上门取车"}}
					</view>
				</view>
				<!-- 取车位置 -->
				<view class="frominfo">
					<view class="left">
						取车位置:
					</view>
					<view class="">
						{{orderDetails.location}}
					</view>
					<view class="daohang">
						<img src="../../../static/guidance.png" alt="" />
					</view>
				</view>
				<!-- 预约日期 -->
				<view class="frominfo">
					<view class="left">
						预约日期:
					</view>
					<view class="right">
						{{orderDetails.reservationTime}}
					</view>
				</view>
				<!-- 提交日期 -->
				<view class="frominfo">
					<view class="left">
						提交日期:
					</view>
					<view class="right">
						{{orderDetails.submitTime}}
					</view>
				</view>
			</view>

			<!-- 车辆信息 -->
			<view class="repairinfo">
				<view class="title">车辆信息</view>
				<!-- 维修单号 -->
				<view class="frominfo">
					<view class="left">
						车辆类型:
					</view>
					<view class="">
						{{orderDetails.carTypeId== 1 ? "A4" : orderDetails.id == 2 ? "A6" : orderDetails.id == 3 ? "A8" : orderDetails.id == 4 ? "glc" : orderDetails.id == 5 ? "gle" : orderDetails.id == 6 ? "汉" : orderDetails.id == 7 ? "秦" : "未知车型" }}
					</view>
				</view>
				<!-- 维修状态 -->
				<view class="frominfo">
					<view class="left2">
						车牌号:
					</view>
					<view class="">
						{{orderDetails.carNum}}
					</view>
				</view>
				<!-- 车主姓名 -->
				<view class="frominfo">
					<view class="left">
						整车照片:
					</view>
				</view>
				<!-- 图 -->
				<view class="images">
					<img :src="orderDetails.repairPhotos" alt="" />
				</view>
				<view class="frominfo">
					<view class="left">
						维修部位照片:
					</view>
				</view>
				<view class="image2">
					<img :src="orderDetails.repairPhotos" alt="" />
					
				</view>

				<!-- 按钮 -->
				<!-- <view class="buttoncertain" @click="showModal">
			确认到场
		</view> -->

				<!-- 按钮，根据状态动态变化 -->
				<view v-if="repairStatus === 'not_arrived'" class="buttoncertain" @click="confirmArrival">
					确认到场
				</view>
				<view v-else-if="repairStatus === 'arrived'" class="buttoncertain" @click="completeRepair">
					维修完成
				</view>
				<view v-else-if="repairStatus === 'completed'" class="button">
					已完成
				</view>



			</view>
		</view>
		<!-- 另一个已完成页面 -->
		<view v-if="radio1 === 1">
			<!-- 维修信息 -->
			<view class="repairinfo">
				<view class="title">维修信息</view>
				<!-- 维修单号 -->
				<view class="frominfo">
					<view class="left">
						维修单号:
					</view>
					<view class="">
						3535252
					</view>
				</view>

				<!-- 车主姓名 -->
				<view class="frominfo">
					<view class="left">
						车主姓名:
					</view>
					<view class="">
						张三
					</view>
				</view>
				<!-- 联系方式 -->
				<view class="frominfo">
					<view class="left">
						联系方式:
					</view>
					<view class="">
						18338350145
					</view>
					<view class="dianhua">
						<img src="../../../static/phone.png" alt="" />
					</view>
				</view>
				<!-- 维修方式 -->
				<view class="frominfo">
					<view class="left">
						维修方式:
					</view>
					<view class="">
						上门取车/到店维修
					</view>
				</view>
				<!-- 取车位置 -->
				<view class="frominfo">
					<view class="left">
						取车位置:
					</view>
					<view class="">
						山阳区32号
					</view>
					<view class="daohang">
						<img src="../../../static/guidance.png" alt="" />
					</view>
				</view>
				<!-- 预约日期 -->
				<view class="frominfo">
					<view class="left">
						预约日期:
					</view>
					<view class="right">
						2022/11/10 11:00
					</view>
				</view>
				<!-- 提交日期 -->
				<view class="frominfo">
					<view class="left">
						提交日期:
					</view>
					<view class="right">
						2022/11/08 11:00
					</view>
				</view>
				<!-- 到场时间-->
				<view class="frominfo">
					<view class="left">
						到场时间:
					</view>
					<view class="right">
						2022/11/08 11:00
					</view>
				</view>
			</view>

			<!-- 车辆信息 -->
			<view class="repairinfo">
				<view class="title">车辆信息</view>
				<!-- 维修单号 -->
				<view class="frominfo">
					<view class="left">
						车辆类型:
					</view>
					<view class="">
						大客车
					</view>
				</view>
				<!-- 维修状态 -->
				<view class="frominfo">
					<view class="left2">
						车牌号:
					</view>
					<view class="">
						豫J45323
					</view>
				</view>
				<!-- 车主姓名 -->
				<view class="frominfo">
					<view class="left">
						整车照片:
					</view>
				</view>
				<!-- 图 -->
				<view class="images">
					<img src="../../../static/dianpu.png" alt="" />
				</view>
				<view class="frominfo">
					<view class="left">
						维修部位照片:
					</view>
				</view>
				<view class="image2">
					<img src="../../../static/dianpu.png" alt="" />
					<img src="../../../static/dianpu.png" alt="" />
					<img src="../../../static/dianpu.png" alt="" />
				</view>

				<!-- 按钮 -->
				<!-- <view class="button" @click="showModal">
				已到场
			</view> -->
			</view>
		</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				status:'',
				orderId: '',
				radio1: 0,
				repairStatus: 'not_arrived' ,// 初始状态：未到场
				orderDetails: {},
			};
		},
		onLoad(options) {
			console.log(options);
			uni.request({
				url: `http://localhost:9205/myRepair/` + options.id, // 替换为你的实际接口
				method: 'GET',
				header: {
					'authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImI0OWU4NmFkLTZhNTMtNGQyNS1iNzFkLTQ1NjBiOTE2ZTFhNSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.PHw5Ez00yg0Vk_Wx4zO3rnSUHe2znWiWOK2IhwFS80dqK02znBtDbe7GfAiuT3YOQSsnBdIi0O7fjprpExMxlg'
				},
				success: (res) => {

					// 将返回的订单详情保存到data中
					this.orderDetails = res.data.data;
					console.log(this.orderDetails)
					// console.log(res)
				}
			});

		},
		methods: {
			confirmArrival() {
				this.repairStatus = 'arrived'; // 确认到场后状态变为已到场
			},
			completeRepair() {
				this.repairStatus = 'completed'; // 维修完成后状态变为已完成
				uni.request({
				     url: 'http://localhost:9206/repairReservation/updateStatus2',  // 替换为你的实际接口地址
				     method: 'PUT',
									header: {
										'authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImI0OWU4NmFkLTZhNTMtNGQyNS1iNzFkLTQ1NjBiOTE2ZTFhNSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.PHw5Ez00yg0Vk_Wx4zO3rnSUHe2znWiWOK2IhwFS80dqK02znBtDbe7GfAiuT3YOQSsnBdIi0O7fjprpExMxlg'
									},
				     data: {
				         status: this.status,
						 id:this.options.id
				        
				     },
				     success: (res) => {
				         
				           
							
				            
				     },
				  
				 });
			}
		}

	}
</script>

<style>
	.out {
		padding: 20rpx 40rpx;

		background-color: #ffffff;
	}

	.hexiaoma {

		background-color: black;
	}

	.square {
		font-weight: 700;
		text-align: center;
		height: 250rpx;

	}

	.title {
		font-weight: 700;
		font-size: 32rpx;
		line-height: 50rpx;
	}

	.frominfo {
		color: #2b2b2b;
		display: flex;
		line-height: 60rpx;
	}

	.left {
		padding-right: 150rpx;
	}

	.left2 {
		padding-right: 178rpx;
	}

	.images>img {
		padding: 10rpx 0rpx;
		width: 220rpx;
		height: 140rpx;
	}

	.image2>img {
		padding-right: 5rpx;
		padding-left: 5rpx;
		width: 212rpx;
		height: 140rpx;
	}

	.button {
		width: 370rpx;
		margin-top: 20rpx;
		border: 0;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #ffffff;
		font-weight: 700;
		font-size: 31rpx;
		margin-left: 80px;
		background-color: #9a9a9a;
	}

	.buttoncertain {
		width: 370rpx;
		margin-top: 20rpx;
		border: 0;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #ffffff;
		font-weight: 700;
		font-size: 31rpx;
		margin-left: 80px;
		background-color: #1d6fff;
	}

	.dianhua {
		width: 30px;
		height: 20px;

		margin-left: 46px;
		padding-top: 4px;
	}

	.dianhua>img {
		width: 22px;
		height: 22px;
	}

	.daohang {
		width: 30px;
		height: 20px;

		margin-left: 61px;
		padding-top: 4px;
	}

	.daohang>img {
		width: 25px;
		height: 25px;
	}
</style>
<style scoped>
	/deep/uni-modal .uni-modal__bd {

		background-color: #0b0b0b;


	}
</style>